What is the difference between stores and context? Let's find out!

<script>
	import Parent1 from "./Parent1.svelte";
	import Parent2 from "./Parent2.svelte";


</script>

<Parent1 />
<hr />
<Parent2 />

<style>
</style>

Here we have an example where Parent1 and Parent2 are identical. They both import a Child component.

If you change the Store slider you can see that both of the sliders move (and the childrens' values both update ), but if you change the context slider only one of them move (and one of the children's value updates).

This is because stores share their data everywhere and context only shares data between related components . That is, only the Child instance in Parent1 will listen to Parent1's context and only the Child instance in Parent2 will listen to Parent2's context.

This also means that stores and context are not mutually exclusive . We could have a context that uses stores to get a reactive context . See this for more info

When should I use a store and when should I use context?

Here is another way to think about this question. Click the buttons to see the different components!

<script>
	import Game from "./Game.svelte";
	import Form from "./Form.svelte";
</script>

<Form />

<hr />

<div class="flex">
	<Game title="Player 1" />
	<Game title="Player 2" />
</div>

<style>
</style>